<template>
  <div class="movielist">
    <header>
        <div class="left">
            <router-link to="/home"> <i ></i></router-link>
        </div>
        {{title}}
    </header>
    <main>
      <movietab></movietab>
        <list></list>
        <router-view></router-view>
    </main>
  </div>
</template>

<script>
// @ is an alias to /src
import Movietab from "../components/Movietab";
import  List from "../components/List"

export default {
  name: "movielist",
  components: {
    Movietab,
      List
  },
  data:function(){
   return{
     title:'勇敢者游戏2：再战巅峰'
   }
  }
};
</script>

<style  lang="scss" scoped>
  .movielist{
    width: 100%;
    header{
      display: flex;
      width: 100%;
      height: 60px;
      background: #e54847;
      color: #ffffff;
      text-align: center;
      font-size: 18px;
      line-height: 60px;
        .left{
            width: 20%;
            i{
                margin-top:20px;
                margin-left: 30px;
                display: block;
                width: 16px;
                height: 16px;
                border-bottom: 2px solid #fff;
                border-left: 2px solid #fff;
                transform: rotate(45deg);
            }
        }
    }
  }
  </style>